<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="renderer" content="webkit">
<meta name="force-rendering" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link charset="utf-8" rel="stylesheet" type="text/css" href="/static/ali/ali.css" />
<link charset="utf-8" rel="stylesheet" type="text/css" href="/static/ali/home.css" />
<link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
<title>友利钱包账户中心</title>
<style type="text/css">
#win-wallet-edit, #win-bankcard-edit{display: none;padding:16px 16px 0 0;}
.layui-input-block{margin-left: 130px;}
.layui-form-radio{width: 110px;}
.layui-form-radio>i:hover, .layui-form-radioed>i {color: #108ee9;}
.layui-form-radio * {font-size: 12px;}
.layui-form-select dl dd.layui-this {background-color: #108ee9;color: #fff;}
.layui-form-label{width: 100px;}
</style>
</head>
<body>
	#include("common/header.html", site="home")

	<div class="content">
		<div class="content-wrapper">
			<div class="content-left">
				<div class="menu-title">账户中心</div>
				<div class="menu-group">
					#include("common/sider.html", site="contacts")
				</div>
			</div>
			<div class="content-right">
				<div class="main-title">常用收款账户管理</div>
				<div class="option-panel">
					<div class="toolbar">
						<button class="jui-btn jui-btn-blue" id="btn-add-bankcard">添加银行卡账户</button>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<button class="jui-btn jui-btn-blue" id="btn-add-wallet">添加钱包账户</button>
					</div>
					<table class="list">
						<colgroup>
							<col style="width: 100px; min-width: 100px;">
							<col style="width: 200px; min-width: 200px;">
							<col style="min-width: 300px;">
							<col style="width: 150px; min-width: 150px;">
							<col style="width: 120px; min-width: 120px;">
						</colgroup>
						<thead>
							<tr>
								<th>名称</th>
								<th>所属</th>
								<th>类型</th>
								<th>户名</th>
								<th>账号</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							#for(item : list)
							<tr>
								<td>#(item.alias)</td>
								#if(item.isSelf)
								<td>本人/本公司</td>
								#else
								<td>他人/他公司</td>
								#end

								<td>#(item.typeName)#if(item.accountType=='bankCard')(#(item.bankName))#end</td>
								<td>#(item.accountName)</td>
								<td>#(item.accountNo)</td>
								<td><a class="edit" dataId="#(item.id)">编辑</a> | <a class="del" dataId="#(item.id)">删除</a></td>
							</tr>
							#end
							#if(list.size()==0)
							<tr>
								<td colspan="5">没有找到相关数据</td>
							</tr>
							#end
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
	#include("common/footer.html")
<script src="/static/layui/layui.js"></script>
<script type="text/javascript">
layui.config({
	version: "3.0.0",
	base: '/static/fly/mods/'
}).extend({
	fly: 'index'
}).use(['form', 'layer', 'layarea'], function(){
	var $ = layui.$, layer = layui.layer, form = layui.form, layarea = layui.layarea;
	// 添加按钮：银行
	$("#btn-add-bankcard").on("click", function(){
		$("#win-bankcard-edit form")[0].reset();
		layer.open({
			type: 1,
			title: "添加银行卡账户",
			content: $("#win-bankcard-edit"),
			area: "60%",
			btn: ["确 定"],
			yes: function(index, layero){
				layero.contents().find("form input[type='button']").click();
			}
		});
	});
	// 添加按钮：钱包
	$("#btn-add-wallet").on("click", function(){
		$("#win-wallet-edit form")[0].reset();
		layer.open({
			type: 1,
			title: "添加钱包账户",
			content: $("#win-wallet-edit"),
			area: "60%",
			btn: ["确 定"],
			yes: function(index, layero){
				layero.contents().find("form input[type='button']").click();
			}
		});
	});
	// 超链接：编辑
	$("table.list a.edit").on("click", function(e){
		$.ajax({
			url: "/customer/contacts/find",
			type:"get",
			data: {id: $(e.target).attr("dataId"), _r: Math.random()},
			success: function(res){
				if(res.accountType=="wallet"){
					form.val("win-wallet-edit", res);
					layer.open({
						type: 1,
						title: "修改钱包账户",
						content: $("#win-wallet-edit"),
						area: "60%",
						btn: ["确 定"],
						yes: function(index, layero){
							layero.contents().find("form input[type='button']").click();
						}
					});
				}else if(res.accountType=="bankCard"){
					res.isSelf = res.isSelf ? "1" : "0";
					res.isCompany = res.isCompany ? "1" : "0";
					form.val("win-bankcard-edit", res);
                    form.render();
                	layarea.render({
                        elem: '#area-picker',
                        data: {province: res.province, city:res.city},
                        change: function (res) {
                            console.log(res);
                        }
                    });

					layer.open({
						type: 1,
						title: "修改银行卡账户",
						content: $("#win-bankcard-edit"),
						area: ["80%", "90%"],
						btn: ["确 定"],
						yes: function(index, layero){
							layero.contents().find("form input[type='button']").click();
						}
					});
				}else{
					layer.msg("无法处理的账户：" + res.accountType);
				}

			},
			error: function(xhr){layer.msg("出错了" + xhr);}
		});
	});
	// 超链接：删除
	$("table.list a.del").on("click", function(e){
		layer.confirm('确定要删除['+$(e.target).parents('tr').children('td').first().text()+']吗？', {icon: 3, title:'提示'}, function(index){
			$.ajax({
				url: "/customer/contacts/delete",
				type:"post",
				data: {id: $(e.target).attr("dataId")},
				success: function(res){
					if(res.code !== 0){
						layer.msg(res.msg, {icon: 2});
					}else{
						layer.msg("删除成功", {icon: 1});
						layer.closeAll();
						location.reload();
					}
				},
				error: function(xhr){layer.msg("出错了" + xhr);}
			});
			layer.close(index);
		});
	});
	// 表单提交
	form.on('submit(layuiadmin-app-form-submit)', function(data){
		var field = data.field; //获取提交的字段
		console.log(field);
		$.ajax({
			url: "/customer/contacts/save",
			type:"post",
			data: field,
			success: function(res){
				if(res.code !== 0){
					layer.msg(res.msg, {icon: 2});
				}else{
					layer.msg("添加成功", {icon: 1});
					layer.closeAll();
					location.reload();
				}
			},
			error: function(xhr){layer.msg("出错了" + xhr);}
		});
	});
	// 输入卡号匹配银行
	$("#win-bankcard-edit input[name='accountNo']").on("input", function(e){
		var cardNo = $("#win-bankcard-edit input[name='accountNo']").val();
		  if(cardNo=="") {
			  $("#bank").val("");
			  form.render('select');
			  //$("#bankLogo").attr("src", "/static/customer/img/banks/DEFAULT.png");
			  return;
		  }
		  if(cardNo.length < 4) {
			  return;
		  }
		  $.get("/customer/contacts/cardbin",{'cardNo':cardNo, 'r':Math.random()}, function(resp) {
			  console.log(resp);
			  if (resp != null) {
				  $("#bank").val(resp.banknick);
				  form.render('select');
				  //$("#bankLogo").attr("src", "/static/customer/img/banks/" + resp.banknick + ".png");
				}
		  });
	});
	// 省市联动
	layarea.render({
        elem: '#area-picker',
        change: function (res) {
            console.log(res);
        }
    });
});
</script>
<div id="win-wallet-edit">
	<form class="layui-form" lay-filter="win-wallet-edit" action="">
		<input type="hidden" name="id" value="">
		<input type="hidden" name="accountType" value="wallet">
		<div class="layui-form-item">
			<label class="layui-form-label">别名</label>
			<div class="layui-input-block">
				<input type="text" name="alias" maxlength="30" required  lay-verify="required" placeholder="用于个人速记识别" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">账户名</label>
			<div class="layui-input-block">
				<input type="text" name="accountName" maxlength="30" required  lay-verify="required" placeholder="友利钱包户名" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">钱包账号</label>
			<div class="layui-input-block">
				<input type="text" name="accountNo" maxlength="30" required  lay-verify="required" placeholder="友利钱包账号" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item layui-hide">
			<input type="button" lay-submit lay-filter="layuiadmin-app-form-submit" value="隐藏按钮1">
		</div>
	</form>
</div>
<div id="win-bankcard-edit">
	<form class="layui-form" lay-filter="win-bankcard-edit" action="">
		<input type="hidden" name="id" value="">
		<input type="hidden" name="accountType" value="bankCard">
		<div class="layui-form-item">
			<label class="layui-form-label">别名</label>
			<div class="layui-input-block">
				<input type="text" name="alias" maxlength="30" required  lay-verify="required" placeholder="用于个人速记识别" autocomplete="off" class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">户名</label>
			<div class="layui-input-block">
				<input type="text" name="accountName" maxlength="30" required  lay-verify="required" placeholder="银行开户名" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">银行卡号</label>
			<div class="layui-input-block">
				<input type="text" name="accountNo" maxlength="30" required  lay-verify="required|number" placeholder="银行卡号" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">所属银行</label>
			<div class="layui-input-block">
				<select name="bankEnglishLetters" lay-verify="required" id="bank">
					<option value=""></option>
					#for(bank : banks)
					<option value="#(bank.shortEnName)">#(bank.bankName)</option>
					#end
				</select>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">开户支行名称</label>
			<div class="layui-input-block">
				<input type="text" name="openingBankName" maxlength="100" required  lay-verify="required" placeholder="开户支行名称" autocomplete="off" class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">个人/公司</label>
			<div class="layui-input-block">
				<input type="radio" name="isCompany" value="0" title="个人" checked>
				<input type="radio" name="isCompany" value="1" title="公司">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">银行账户所属</label>
			<div class="layui-input-block">
				<input type="radio" name="isSelf" value="1" title="本人/本公司" checked>
				<input type="radio" name="isSelf" value="0" title="他人/他公司">
			</div>
		</div>

		<div class="layui-form-item" id="area-picker">
			<label class="layui-form-label">省份/城市</label>
			<div class="layui-input-block">
				<div class="layui-input-inline">
					<select name="province" class="province-selector" data-value="" lay-filter="province">
						<option value="">请选择省(公司账户必填)</option>
					</select>
				</div>
				<div class="layui-input-inline">
					<select name="city" class="city-selector" data-value="" lay-filter="city">
						<option value="">请选择市(公司账户必填)</option>
					</select>
				</div>
			</div>
		</div>
		<div class="layui-form-item layui-hide">
			<input type="button" lay-submit lay-filter="layuiadmin-app-form-submit" value="隐藏按钮2">
		</div>
	</form>
</div>
</body>
</html>
